<template>
  <!-- 导航栏 -->
  <view class="navbar">
    <text>请假统计</text>
  </view>

  <!-- 总请假人数提示 -->
  <view class="total-notice">
    <text class="warning">⚠</text>
    <text>当前请假学生人数：1000人</text>
  </view>

  <view class="container">
    <view class="content">
      <!-- 地图区域 -->
      <text class="map-title"> 高发区的地人数分布</text>
      <view class="map-section">

        <!-- 假设使用图片或组件模拟地图 -->
        <image src="/static/map-placeholder.png" mode="widthFix" class="map-image" />
        <text class="map-note">·高发区的地省份</text>
      </view>

      <!-- 学生请假类型分布 -->
      <text class="map-title">学生请假类型分布</text>
      <view class="stats-section">

        <view class="progress-bar" v-for="(item, index) in leaveTypes" :key="index">
          <text>{{ item.type }}</text>
          <progress :percent="item.percent" stroke-width="10" active-color="#007AFF "/>
        </view>
      </view>

      <!-- 留校与离校学生占比 -->
      <text class="map-title">留校与离校学生占比</text>
      <view class="pie-section">
        <view class="pie-chart">
          <!-- 模拟饼图，实际可使用 uCharts 插件 -->
          <text class="pie-value">28%</text>
          <text>留校</text>
          <view class="pie-details">
            <text>· 留校 500人</text>
            <text>· 离校 2635人</text>
          </view>
        </view>
      </view>

      <!-- 各学院请假/离校人数 -->
      <text class="map-title">各学院请假/离校人数</text>
      <view class="college-section">

        <view class="tab">
          <text class="tab-btn tab-active">请假申请</text>
          <text class="tab-btn">离校申请</text>
        </view>
        <view class="progress-bar" v-for="(item, index) in colleges" :key="index">
          <text>{{ item.name }}</text>
          <progress :percent="item.percent" stroke-width="10" active-color="#007AFF" />
        </view>
      </view>

      <!-- 底部导航 -->
      <view class="footer">
        <view class="footer-item" @click="navigateTo('approval')">
          <text class="icon"></text>
          <text>请假审批</text>
        </view>
        <view class="footer-item active">
          <text class="icon"></text>
          <text>数据统计</text>
        </view>
        <view class="footer-item" @click="navigateTo('more')">
          <text class="icon"></text>
          <text>更多功能</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>


export default {
  data() {
    return {
      leaveTypes: [
        { type: '请假类型一', percent: 56 },
        { type: '请假类型二', percent: 56 },
        { type: '请假类型三', percent: 56 },
        { type: '请假类型四', percent: 56 },
        { type: '请假类型五', percent: 56 },
      ],
      colleges: [
        { name: 'A学院', percent: 56 },
        { name: 'B学院', percent: 56 },
        { name: 'C学院', percent: 56 },
        { name: 'D学院', percent: 56 },
        { name: 'E学院', percent: 56 },
      ],
    };
  },
  methods: {
    navigateTo(page) {
      if (page === 'approval') {
        uni.navigateTo({
          url: '/pages/admin/admin'
        });
      } else if (page === 'more') {
        uni.navigateTo({
          url: '/pages/more/more'
        });
      }
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  /* height: 100vh; */
  background-color: #f8f8f8;
  padding: 0 5px;
}

.content{
  padding: 13px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #000;
  color: #fff;
}

.navbar {
  background-color: #007AFF;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 18px;
}

.total-notice {
  padding: 10px;
  background-color: #fff7e6;
  color: #856404;
  display: flex;
  align-items: center;

}


.warning {
  margin-right: 5px;
}

.map-section {
  padding: 10px;
  background-color: #fff;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
}

.map-image {
  width: 100%;
  height: auto;
}

.map-note {
  font-size: 12px;
  color: #888;
}

.map-title{
  position: relative;
  font-weight: bold;
}

.map-title::before{
  content: '';
  position: absolute;
  left: -7px; /* 靠左对齐 */
  top: 3px; /* 微调与文字的垂直对齐 */
  bottom: 2px; /* 控制竖条高度，与文字高度匹配 */
  width: 4px; /* 竖条宽度 */
  background-color: #007aff; /* 蓝色 */
  border-radius: 2px; /* 轻微圆角，可选 */
}

.stats-section, .pie-section, .college-section {
  padding: 10px;
  background-color: #fff;
  margin: 10px 0;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.progress-bar {
  margin: 10px 0;
}



.pie-chart {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pie-value {
  font-size: 24px;
  font-weight: bold;
  color: #007AFF;
}

.pie-details {
  margin-left: 20px;
}

.tab {
  padding: 10px;
  padding-left: 0%;
  position: relative;
  /* justify-content: space-around; */
  margin-bottom: 10px;
  border: 1px solid #007AFF;
  border-radius: 20px;
}

.tab-btn{
  padding-left: 36px;
  padding-right: 36px;
  padding-top: 10px;
  padding-bottom: 10px;

}



.tab-active {
  background-color: #007AFF;
  color: #fff;
  border-radius: 18px;
  padding-right: 60px;
}

.footer {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.footer-item {
  text-align: center;
}

.footer-item.active {
  color: #007AFF;
}

.icon {
  font-size: 20px;
}
</style>